<script setup lang="ts">
import { MinusOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { ref, h, reactive, computed } from "vue";
import eChart from "/@/components/e-chart.vue";
import CostConfigurationAddModal from "/@/components/cost-configuration/add-modal.vue";

const columns = [
  {
    title: "能源类型",
    dataIndex: "energyType",
    key: "energyType",
    width: 150,
    align: "center",
  },
  { title: "时间段", dataIndex: "time", key: "time", align: "center" },
  { title: "价格类型", dataIndex: "priceType", key: "priceType", align: "center" },
  { title: "价格", dataIndex: "price", key: "price", align: "center" },
];

const tableData = ref([
  {
    energyType: "电",
    time: "2024-06-17 - 2024-06-17",
    priceType: "尖峰电价",
    price: "0.75元/kWh",
  },
  {
    energyType: "电",
    time: "2024-06-17 - 2024-06-17",
    priceType: "平时电价",
    price: "0.5元/kWh",
  },
  {
    energyType: "电",
    time: "2024-06-17 - 2024-06-17",
    priceType: "古电价",
    price: "0.25元/kWh",
  },
  {
    energyType: "水",
    time: "2024-06-17 - 2024-06-17",
    priceType: "阶梯水价1",
    price: "2.00元/m³",
  },
  {
    energyType: "水",
    time: "2024-06-17 - 2024-06-17",
    priceType: "阶梯水价2",
    price: "3.00元/m³",
  },
  {
    energyType: "气",
    time: "2024-06-17 - 2024-06-17",
    priceType: "阶梯气价1",
    price: "2.50元/m³",
  },
  {
    energyType: "气",
    time: "2024-06-17 - 2024-06-17",
    priceType: "阶梯气价",
    price: "3.50元/m³",
  },
  {
    energyType: "热",
    time: "2024-06-17 - 2024-06-17",
    priceType: "普通热价",
    price: "40.00元/GJ",
  },
  {
    energyType: "冷",
    time: "2024-06-17 - 2024-06-17",
    priceType: "普通冷价",
    price: "40.00元/GJ",
  },
]);

const costConfigurationAddModal = ref();

function add() {
  // console.log(selectedKeys.value);
  costConfigurationAddModal.value.showModal();
}
</script>

<template>
  <div class="container">
    <div class="operate">
      <a-button class="button" type="primary" @click="add">新增环节</a-button>
      <a-button type="primary" danger>删除环节</a-button>
    </div>

    <a-card title="能源价格配置列表">
      <a-table :columns="columns" :dataSource="tableData"></a-table>
    </a-card>

    <CostConfigurationAddModal ref="costConfigurationAddModal" @refresh="" />
  </div>
</template>

<style scoped>
.operate {
  margin: 0 0 10px 0;
}
.button {
  margin-right: 10px;
}
</style>
